<template>
	<view class="content">
		<view class="center-layout">
			<view class="title-layout">
				<image class="wxlogo" src="icon/wechat.png"></image>
				<text class="title-text">{{title}}</text>
			</view>
			<view class="text-layout">
				<text class="text-text">{{message}}</text>
			</view>
			<div class="qrcode-layout" @click="nextVisualization">
				<u-qrcode ref="qr" canvas-id="qr" :value="qrcontent" :size="qrsize" @click="remake"
					@complete="complete($event)"></u-qrcode>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '使用微信扫一扫登录',
				message: '「新森智能云平台」',
				qrcontent: 'https://biot.airtoall.com',
				qrsize: 180
			}
		},
		onLoad() {
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/visualization/visualization'
				})
			}, 2000);
		},
		methods: {
			remake() {
				const ref = this.$refs['qr'];
				ref.remake();
			},
			complete(e) {
				if (e.success) {
					console.log('生成成功');
				} else {
					console.log('生成失败');
				}
			},
			nextVisualization() {
				uni.navigateTo({
					url: '/pages/visualization/visualization'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	.center-layout {
		display: flex;
		margin-top: -128px;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.title-layout {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wxlogo {
		height: 28px;
		width: 28px;
		margin: 6px;
	}

	.title-text {
		font-size: 18px;
	}

	.text-layout {
		display: flex;
		justify-content: center;
	}

	.text-text {
		margin: 12px;
		font-weight: bold;
		font-size: 24px;
	}

	.qrcode-layout {
		height: 180px;
		width: 180px;
		margin-top: 16px;
	}
</style>
